<template>
  <swiper :slides-per-view="'auto'" :space-between="8" :free-mode="true" class="swipe-container"
    @slideChange="onChange">
    <swiper-slide v-for="(item, index) in list" :key="index" :class="{ activeItemStyle: currentIndex === index }"
      @click="handleItemClick(index)" style="width: 108px;">
      <div class="image-wrapper">
        <img :src="item.imgSrc" class="swipe-image" />
      </div>
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import { ref, onMounted } from "vue";
import api from "@/api";
import { getImageByType } from "@/utils/imageMap";

const getImageSrc = (type) => {
  try {
    return (
      getImageByType(type) || new URL("@/assets/images/ai_pose/default.png", import.meta.url).href
    );
  } catch {
    return new URL("@/assets/images/ai_pose/default.png", import.meta.url).href;
  }
};

const currentIndex = ref(0);
const list = ref([]);
const emit = defineEmits(["getAIPoseItem"]);


const handleItemClick = (index) => {
  currentIndex.value = index;
  emit("getAIPoseItem", list.value[index]);
};

// 查询创作类型列表
const queryTypeList = async () => {
  try {
    const res = await api.typeList();
    const filterData = res.data.filter((item) => {
      return item.typeCode >= 21
    })
    list.value = filterData.map((item) => ({
      ...item,
      imgSrc: getImageSrc(item.typeCode),
    }));
    console.log(list.value);

    emit("getAIPoseItem", list.value[currentIndex.value]);
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  queryTypeList();
});
</script>

<style lang="less">
.swipe-container {
  margin-top: 16px;
  margin-bottom: 25px;


  .image-wrapper {
    box-sizing: border-box;

    .swipe-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }


  .activeItemStyle {
    .image-wrapper {
      border: 4px solid #6b77ff;
    }
  }
}
</style>
